<template>
  <div class="form-item">
    <el-scrollbar>
      <div class="components-list">
        <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
          <div class="components-title">
            {{ item.title }}
          </div>
          <draggable
            class="components-draggable"
            :list="item.list"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :clone="cloneComponent"
            draggable=".components-item"
            :sort="false"
            @end="onEnd"
          >
            <div
              v-for="(element, index) in item.list"
              :key="index"
              class="components-item"
              @click="addComponent(element)"
            >
              <div class="components-body">
                {{ element.name }}
              </div>
            </div>
          </draggable>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

let tempActiveData = null;

function getUuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return "b" + v.toString(16).replace(/-/ig, "");
  });
}

export default {
  name: "FormItem",
  data() {
    return {
      leftComponents: [
        {
          title: "输入型组件",
          list: [
            {
              type: "form",
              render: "input",
              name: "单行输入框",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "textarea",
              name: "多行文本",
              label: "",
              field: "",
              props: {
                type: {
                  type: "input",
                  value: "textarea"
                }
              },
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "input-number",
              name: "计数器",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "switch",
              name: "开关",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "slider",
              name: "滑块",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "datepicker",
              name: "日期选择器",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "select",
              name: "选择器",
              label: "",
              field: "",
              props: {
                multiple: {
                  label: "是否多选",
                  type: "switch",
                  value: false,
                }
              },
              optionsValue: "value",
              optionsLabel: "label",
              options: [
                {
                  value: "1",
                  label: "备选项1"
                }, {
                  value: "2",
                  label: "备选项2"
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "radio",
              name: "单选框",
              label: "",
              field: "",
              props: {},
              optionsValue: "value",
              optionsLabel: "label",
              options: [
                {
                  value: "1",
                  label: "备选项1"
                }, {
                  value: "2",
                  label: "备选项2"
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "checkbox",
              name: "多选框",
              label: "",
              field: "",
              props: {},
              optionsValue: "value",
              optionsLabel: "label",
              options: [
                {
                  value: "1",
                  label: "备选项1"
                }, {
                  value: "2",
                  label: "备选项2"
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "cascader",
              name: "级联选择器",
              label: "",
              field: "",
              props: {},
              optionsValue: "value",
              optionsLabel: "label",
              optionsChildren: "children",
              options: [
                {
                  value: "1",
                  label: "备选项1"
                }, {
                  value: "2",
                  label: "备选项2"
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "tree-select",
              name: "树选择器",
              label: "",
              field: "",
              props: {},
              optionsValue: "value",
              optionsLabel: "label",
              optionsChildren: "children",
              options: [
                {
                  value: "1",
                  label: "备选项1"
                }, {
                  value: "2",
                  label: "备选项2"
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "image-upload",
              name: "图片上传",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "form",
              render: "file-upload",
              name: "文件上传",
              label: "",
              field: "",
              props: {},
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            }
          ]
        }, {
          title: "布局型组件",
          list: [
            {
              type: "layouts",
              render: "tabs",
              name: "多标签",
              props: {
                stretch: {
                  value: false,
                },
                type: {
                  value: "",
                  type: "select",
                  options: [{
                    value: "card",
                    label: "卡片"
                  }, {
                    value: "border-card",
                    label: "边框卡片"
                  }, {
                    value: "",
                    label: "默认"
                  }]
                }
              },
              tabsList: [
                {
                  name: "first",
                  label: "用户管理",
                  layouts: []
                },
                {
                  name: "two",
                  label: "配置管理",
                  layouts: []
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            },
            {
              type: "layouts",
              render: "layout",
              name: "栅格布局",
              props: {
                gutter: {
                  value: 15,
                }
              },
              layoutList: [
                {
                  props: {
                    span: {
                      value: 12
                    }
                  },
                  layouts: []
                },
                {
                  props: {
                    span: {
                      value: 12
                    }
                  },
                  layouts: []
                }
              ],
              network:{
                dict:true,
                dictType:"",
                url:"",
              }
            }
          ]
        }
      ]
    }
  },
  components: {
    draggable,
  },
  methods: {
    cloneComponent(origin) {
      const clone = JSON.parse(JSON.stringify(origin));
      clone.label = clone.name;
      clone.id = getUuid();
      clone.field = "f"+clone.id;
      tempActiveData = clone;
      return tempActiveData;
    },
    onEnd(obj) {
      if (obj.from !== obj.to) {
        this.$store.dispatch("formGen/SET_COMPONENT", tempActiveData)
      }
    },


    addComponent(ele) {
      const clone = JSON.parse(JSON.stringify(ele))
      clone.label = clone.name;
      clone.id = getUuid();
      clone.field = "f"+clone.id;
      this.$store.dispatch("formGen/ADD_COMPONENT", clone)
    }

  }
}
</script>
<style scoped lang="scss">
.form-item {
  width: 100%;
  height: 100%;
  padding: 10px 0;
}

.components-list {
  padding: 0 10px;

}

.components-title {
  font-size: 14px;
  color: #222;
  margin: 6px 2px;
}

.components-item {
  width: 48%;
  padding: 8px 10px;
  background: #f6f7ff;
  font-size: 12px;
  cursor: move;
  border: 1px dashed #f6f7ff;
  border-radius: 3px;
  margin-bottom: 10px;
}

.components-draggable {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 20px;
}
</style>
